<template>
	<view>
		<view class="info_container">
			<view style="display: flex;align-items: center;">
				<image src="http://gips0.baidu.com/it/u=3560029307,576412274&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280"
					mode="aspectFill"></image>
				<view class="user_name">名字名字名字名字</view>
			</view>
			<view class="love_btn">喜欢</view>
		</view>
		<view class="swiper_container">
			<swiper class="swiper" @change="viewChange" :autoplay="false" circular v-if="imgsList.length" indicator-dots
				indicator-active-color="#D81548" :style="[{ height: swiperHeight + 'px' }]">
				<swiper-item v-for="(url, index) in imgsList" :key="index">
					<view class="swiper-item uni-bg-red" @click="clickBreak(url)">
						<image :src="url" mode="widthFix" class="img" @load="loadImg"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="content_container">{{ content }}</view>
		<view class="time_container">{{ updateTime }}</view>
		<view class="comment_container">
			<!-- 评论列表 -->
			<post-comments :post-id="postId" :initial-comments="initialComments" />
		</view>
	</view>
</template>

<script>
	import {
		cloneDeep
	} from "lodash-es"
	import {
		getQueryFromUrl,
		getVhToPx
	} from "@/util/common.js"
	import PostComments from './post-comments.vue'
	export default {
		components: {
			PostComments
		},
		data() {
			return {
				swiperHeight: 0,
				current: 0,
				imgsList: [
					"http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
					"http://gips0.baidu.com/it/u=3822353666,2757632348&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
				],
				content: '🌟🌟🌟🌟🌟这本书荣获美国国家图书奖、 普利策奖双项大奖。 诺贝尔文学奖得主约翰· 斯坦贝克的经典名著。',
				updateTime: '2024-08-31',
				postId: '123', // 当前帖子ID
				initialComments: [],
				// initialComments: [{
				// 		id: 1,
				// 		avatar: 'http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
				// 		username: '小红书用户',
				// 		createTime: '5分钟前',
				// 		content: '这个产品真的很好用，我已经回购三次了！',
				// 		isLiked: false,
				// 		likeCount: 24,
				// 		replyCount: 2,
				// 		replies: [{
				// 				id: 101,
				// 				username: '用户A',
				// 				content: '同感，我也觉得很好用',
				// 				createTime: '2分钟前'
				// 			},
				// 			{
				// 				id: 102,
				// 				username: '用户B',
				// 				content: '请问在哪里买的？',
				// 				createTime: '1分钟前'
				// 			}
				// 		],
				// 		images: []
				// 	},
				// 	{
				// 		id: 2,
				// 		avatar: 'http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
				// 		username: '购物达人',
				// 		createTime: '30分钟前',
				// 		content: '颜色很正，和图片一模一样',
				// 		isLiked: true,
				// 		likeCount: 56,
				// 		replyCount: 0,
				// 		replies: [],
				// 		images: ['http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960']
				// 	}
				// ]
			}
		},
		mounted() {
			console.log(this.getQueryFromUrl())
		},
		methods: {
			getQueryFromUrl,
			clickBreak(url) {
				let arr = cloneDeep(this.imgsList)
				let index = arr.findIndex(value => value == url)
				uni.previewImage({
					current: index,
					urls: arr,
				});

			},
			loadImg() {
				this.getCurrentSwiperHeight('.img');
			},
			// 轮播切换
			viewChange(e) {
				this.current = e.target.current;
				this.getCurrentSwiperHeight('.img');
			},
			// 动态获取内容高度
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					// 切换到其他页面swiper的change事件仍会触发，这时获取的高度会是0，会导致回到使用swiper组件的页面不显示了
					if (this.imgsList.length && res[0][this.current].height) {
						this.swiperHeight = res[0][this.current].height;
						if (this.swiperHeight > getVhToPx(50)) {
							this.swiperHeight = getVhToPx(50);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info_container {
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 24rpx 0 24rpx;
		background-color: #fff;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.user_name {
			font-size: 32rpx;
			margin-left: 16rpx;
			font-weight: 400;
		}

		.love_btn {
			width: 120rpx;
			height: 24px;
			border-radius: 20rpx;
			font-size: 26rpx;
			border: 1px solid #D81548;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #D81548;
		}
	}

	.swiper_container {
		image {
			width: 100%;
		}
	}

	.content_container {
		margin: 30rpx 24rpx;
		font-size: 32rpx;
		line-height: 36rpx;
		color: #333333;
		letter-spacing: 2px;
	}

	.time_container {
		margin: 30rpx 24rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.comment_container {
		margin: 30rpx 24rpx;

	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}
</style>